<template>
  <view class="message-detail-page">
    <view class="message-detail-header">
      <image
        class="message-detail-icon"
        :src="detail.icon"
        mode="aspectFill"
      />
      <view class="message-detail-header-content">
        <view class="message-detail-title">{{ detail.title }}</view>
        <view class="message-detail-time">{{ detail.time }}</view>
      </view>
    </view>
    <view class="message-detail-content-card">
      <view class="message-detail-content-text">
        <rich-text :nodes="processedContent" />
      </view>
    </view>
  </view>
</template>

<script>
  import { selectMessageNoticeById, readMessage } from '../../api/message.js'
  import RichTextUtils from '../../common/richTextUtils.js'

  export default {
    name: 'MessageDetail',
    data() {
      return {
        detail: {
          icon: '',
          title: '',
          time: '',
          content: ''
        },
        iconMap: {
          1: '/static/icon/message_system_icon.png',
          2: '/static/icon/message_service_icon.png',
          3: '/static/icon/message_ca_icon.png'
        },
        messageId: ''
      }
    },
    computed: {
      processedContent() {
        return RichTextUtils.limitImageWidth(this.detail.content)
      }
    },
    async onLoad(options) {
      if (!options.id) return
      this.messageId = Number(options.id)
      await this.loadMessageDetail()
      await this.markAsRead()
    },
    methods: {
      // 加载消息详情
      async loadMessageDetail() {
        try {
          const res = await selectMessageNoticeById(this.messageId)
          if (res.code === 200 && res.data) {
            this.detail = {
              icon: this.iconMap[Number(res.data.messageType)],
              title: res.data.title,
              time: res.data.createTime,
              content: res.data.messageContent
            }
          }
        } catch (e) {
          uni.showToast({ title: '详情获取失败', icon: 'none' })
        }
      },
      // 标记消息为已读
      async markAsRead() {
        try {
          const user = uni.getStorageSync('user') || {}
          const openId = user.openId || ''
          if (res.data.status !== 1) {
            await readMessage({
              id: this.messageId,
              openId: openId
            })
            console.log('消息已标记为已读')
          }
        } catch (e) {
          console.error('标记已读失败', e)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .message-detail-page {
    min-height: 100vh;
    background: #f5f6fa;
    padding: 0 0 40rpx 0;
  }
  .message-detail-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #fff;
    border-top: 1rpx solid #eaeaea;
    padding: 0 32rpx;
    height: 120rpx;
  }
  .message-detail-icon {
    width: 72rpx;
    height: 72rpx;
    border-radius: 50%;
    margin-right: 24rpx;
    background: #eee;
  }
  .message-detail-header-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .message-detail-title {
    font-weight: 600;
    font-size: 30rpx;
    color: #333333;
  }
  .message-detail-time {
    font-size: 24rpx;
    color: #999999;
  }
  .message-detail-content-card {
    margin-top: 16rpx;
    background: #fff;
    padding: 40rpx;
  }
  .message-detail-content-text {
    font-size: 28rpx;
    color: #666;
    text-align: center;
    line-height: 2.1;
  }
</style>
